<template>
  <view class="container">
    <view class="tools-grid">
      <view class="tool-item" v-for="(tool, index) in tools" :key="index">
        <image class="tool-icon" :src="tool.icon" mode="aspectFit"></image>
        <text class="tool-name">{{ tool.name }}</text>
        <text class="tool-desc">{{ tool.description }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const tools = ref([
  {
    icon: '/static/images/tools/invite.png',
    name: '邀请赚现金',
    description: '邀请好友得金币'
  },
  {
    icon: '/static/images/tools/extract.png',
    name: '文案提取',
    description: '快速提取文字'
  },
  {
    icon: '/static/images/tools/watermark.png',
    name: '去水印',
    description: '视频去水印'
  },
  {
    icon: '/static/images/tools/dialogue.png',
    name: '对话配音',
    description: '多角色对话'
  },
  {
    icon: '/static/images/tools/speed.png',
    name: '缩短停顿',
    description: '调整语音节奏'
  },
  {
    icon: '/static/images/tools/bgm.png',
    name: '背景音乐',
    description: '添加背景音乐'
  },
  {
    icon: '/static/images/tools/md5.png',
    name: 'md5去重',
    description: '文件去重'
  },
  {
    icon: '/static/images/tools/volume.png',
    name: '音量放大',
    description: '调整音量大小'
  },
  {
    icon: '/static/images/tools/pc.png',
    name: '配音电脑版',
    description: 'PC端使用'
  },
  {
    icon: '/static/images/tools/cover.png',
    name: '三联封面',
    description: '生成视频封面'
  },
  {
    icon: '/static/images/tools/voice.png',
    name: '听声识人',
    description: '语音识别'
  },
  {
    icon: '/static/images/tools/ai.png',
    name: 'AI消除笔',
    description: '智能去除物体'
  }
])
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background: #f8f8f8;
  min-height: 100vh;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.tool-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tool-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.tool-name {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.tool-desc {
  font-size: 22rpx;
  color: #999;
}
</style> 